<template>
  <view @longpress="handleShowAddBut">
    <u-form :model="form.invInfo" ref="invInfo">
      <u-form-item label="物料编码">
        <u--input
            placeholder="请输入物料编码"
            border="surround"
            clearable
            :disabled="true"
            v-model="form.invInfo.invCode"
        ></u--input>
      </u-form-item>
      <u-form-item label="物料名称">
        <u--input
            placeholder="请输入物料名称"
            border="surround"
            clearable
            :disabled="true"
            v-model="form.invInfo.invName"
        ></u--input>
      </u-form-item>
      <u-form-item label="物料型号">
        <u--input
            placeholder="请输入物料型号"
            border="surround"
            clearable
            :disabled="true"
            v-model="form.invInfo.invSpec"
        ></u--input>
      </u-form-item>
      <u-form-item label="单位">
        <u--input
            placeholder="请输入单位"
            border="surround"
            clearable
            :disabled="true"
            v-model="form.invInfo.unitName"
        ></u--input>
      </u-form-item>
    </u-form>
    <u-collapse>
      <u-collapse-item :title="'erp库存:' + formatNumber(form.erpStock)" name="invInfo">
        <view>
          <u-list >
            <u-list-item v-for="(item, index) in form.erpStockDetail" :key="index" :class="['custom-list-item']">
              <view>
                <u-cell :title="`物料编码：${item.whCode}`"></u-cell>
                <u-cell :title="`仓库：${item.whCode}`"></u-cell>
                <u-cell :title="`批次号：${item.batchNo}`"></u-cell>
                <u-cell :title="`现存量：${item.qty}`"></u-cell>
                <u-cell :title="`待出库：${item.fOutQty}`"></u-cell>
                <u-cell :title="`可用量：${item.canUseQty}`"></u-cell>
              </view>
            </u-list-item>
          </u-list>
        </view>
      </u-collapse-item>
      <u-collapse-item :title="'溢出库存：' + formatNumber(form.overStock)" name="overStock">
        <view>
          <u-list >
            <u-list-item v-for="(item, index) in form.overLogStock" :key="index" :class="['custom-list-item']">
              <view>
                <u-cell :title="`物料编码：${item.invCode}`"></u-cell>
                <u-cell :title="`单据数量：${item.qty}`"></u-cell>
                <u-cell :title="`实发数量：${item.actualQty}`"></u-cell>
                <u-cell :title="`原溢出库存：${item.oldOverQty}`"></u-cell>
                <u-cell :title="`单据类型：${getDictValue('over_source_type', item.sourceType)}`"></u-cell>
                <u-cell :title="`订单号：${formatStr(item.orderNo)}`"></u-cell>
                <u-cell :title="`备注：${formatStr(item.remake)}`"></u-cell>
                <u-cell :title="`确认时间：${formatDate(item.qts)}`"></u-cell>
              </view>
            </u-list-item>
          </u-list>
        </view>
      </u-collapse-item>
      <u-collapse-item :title="'理论实际库存:' + (formatNumber(form.erpStock) - formatNumber(form.overStock))" name="actualQty" :clickable="false"/>
    </u-collapse>
    <u-modal :show="show" :title="title" :content='content' showCancelButton
              @confirm="handleConfirm"  @cancel="show = false">
      <u-form :model="params">
        <u-form-item label="物料编码">
          <u--input
              placeholder="请输入物料编码"
              border="surround"
              clearable
              v-model="params.invCode"
          ></u--input>
        </u-form-item>
        <u-form-item label="溢出明细">
          <u-switch v-model="params.showOldOver" ></u-switch>
        </u-form-item>
        <u-form-item label="库存明细">
          <u-switch v-model="params.showErpStock" ></u-switch>
        </u-form-item>
      </u-form>
    </u-modal>
    <view v-show="showAddBut" class="fixed-bottom">
      <u-button  @click="showLoadData">查询库存</u-button>
    </view>
  </view>
</template>

<script>

import {getCurStock} from "@/api/work/stockTrace/stock";
import {formatDate, formatNumber, formatStr} from "@/api/work/utils";
import {getDictValue, initDict} from "@/utils/dictUtil";
import {strIsEmpty} from "@/utils/paramUtil";
import {dealBarCde, destroyScan, initScan} from "@/utils/scanUtil";

export default {
  data() {
    return {
      handlePdaScan: null,
      initScanFlag: null,
      show: false,
      showAddBut: false,
      title: null,
      content: "查询库存",
      params: {
        invCode: null,
        showOldOver: true,
        showErpStock: true
      },
      form: {
        invInfo: {
          invCode: null,
          invName: null,
          invSpec: null,
          invUnit: null
        },
        erpStock: null,
        erpStockDetail: null,
        overStock: null,
        overLogStock: null
      }
    };
  },
  beforeDestroy() {
    if (this.initScanFlag) {
      destroyScan(this.handlePdaScan);
    }
  },
  created() {
    initDict(['over_source_type'])
    let that = this;
    this.handlePdaScan = function (res) {
      let barCode =  dealBarCde(res);
      if (barCode != null && barCode.invCode != null) {
        that.params.invCode = barCode.invCode;
        that.handleConfirm();
      }
    };
    this.initScanFlag = initScan(this.handlePdaScan)
  },
  methods: {
    formatDate,
    formatStr,
    getDictValue,
    formatNumber,
    handleShowAddBut() {
      // 长按显示增加开关，3秒后消失
      this.showAddBut = true;
      setTimeout(() => {
        this.showAddBut = false;
      }, 3000);
    },
    showLoadData() {
      this.show = true;
      this.params.invCode = null;
    },
    handleConfirm() {
      if (strIsEmpty(this.params.invCode)) {
        this.$modal.showToast("物料编码不能为空");
        return;
      }
      this.loadData();
    },
    changeInv() {
      this.show = true;
    },
    loadData() {
      getCurStock(this.params).then(res => {
        this.form = res.data;
        this.show = false;
      });
    },
  },

};</script>
<style>
.custom-list-item {
  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
  background-color: #ADD8E6;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可能需要设置一些内边距或外边距以保持良好的视觉效果 */
  padding: 10px;
  text-align: center;
  background-color: #fff; /* 背景色与页面背景色相同或透明，视设计而定 */
  z-index: 999; /* 确保按钮在最上层 */
}
</style>
